<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left" >
                <comps:categoriesMenu />
            </ui:define>

            <ui:define name="principal">
                <h:outputScript library="javascript" name="util.js" />
                <h:form id="formPublicacion" enctype="multipart/form-data" >
                    <p:growl id="growl" showDetail="true" globalOnly="true" />
                    <h:panelGrid columns="1" style="text-align: center" >

                        <f:facet name="header" >
                            <h1 style="font-family: Arial">Publicar</h1>
                        </f:facet>
                        <p:fieldset legend="Datos del producto" styleClass="fieldset" >
                            <h:panelGrid columns="3" columnClasses="labelColumn" >                       

                                <h:outputLabel value="Titulo: "/>
                                <p:inputText id="titulo" value="#{publicacion.titulo}" required="true"
                                             requiredMessage="Valor requerido" >
                                    <f:validateLength maximum="45" />
                                </p:inputText>
                                <p:message id="tituloVal" for="titulo" showSummary="false" />

                                <h:outputLabel value="Cantidad: " />
                                <p:inputText id="cantidad" value="#{publicacion.cantidad}" required ="true"
                                             requiredMessage="Valor requerido" 
                                             converterMessage="Debe ingresr un numero"
                                             style="width: 50px" >
                                </p:inputText>
                                <p:message id="cantidadVal" for="cantidad"/>
                            </h:panelGrid>
                            <p:outputPanel id="datos" >
                                <h:panelGrid columns="3" columnClasses="labelColumn" >

                                    <h:outputLabel value="Categoria: " />
                                    <h:selectOneMenu id="categoria" value="#{publicacion.selectedCategoria}" required ="true"
                                                     requiredMessage="Valor requerido"> 
                                        <f:selectItem itemLabel="Categorias" itemValue=""/>
                                        <f:selectItems value="#{publicacion.categorias}" />
                                        <p:ajax event="change" update="datos growl" 
                                                listener="#{publicacion.categoriaSeleccionadaCambio}" />
                                    </h:selectOneMenu>
                                    <p/>

                                    <h:outputLabel id="labelSubCategoria1" value="Subcategoria: "
                                                   rendered="#{publicacion.subcategoria1Render}" />
                                    <h:selectOneMenu id="subcategoria1" value="#{publicacion.selectedSubcategoria1}" 
                                                     rendered="#{publicacion.subcategoria1Render}" >
                                        <f:selectItem itemLabel="Seleccione una subcategoria" itemValue="0" />
                                        <f:selectItems value="#{publicacion.subcategorias1}" />
                                        <p:ajax event="change" update="datos growl" 
                                                listener="#{publicacion.subcategoria1SeleccionadaCambio}" />   
                                    </h:selectOneMenu>
                                    <p/>

                                    <h:outputLabel id="labelSubCategoria2" value="Subcategoria: "
                                                   rendered="#{publicacion.subcategoria2Render}" />
                                    <h:selectOneMenu id="subcategoria2" value="#{publicacion.selectedSubcategoria2}" 
                                                     rendered="#{publicacion.subcategoria2Render}" >
                                        <f:selectItem itemLabel="Seleccione una subcategoria" itemValue="0" />
                                        <f:selectItems value="#{publicacion.subcategorias2}" />
                                        <p:ajax event="change" update="datos growl" 
                                                listener="#{publicacion.subcategoria2SeleccionadaCambio}" />   
                                    </h:selectOneMenu>
                                    <p/>

                                    <h:outputLabel id="labelSubCategoria3" value="Subcategoria: "
                                                   rendered="#{publicacion.subcategoria3Render}" />
                                    <h:selectOneMenu id="subcategoria3" value="#{publicacion.selectedSubcategoria3}" 
                                                     rendered="#{publicacion.subcategoria3Render}" >
                                        <f:selectItem itemLabel="Seleccione una subcategoria" itemValue="0" />
                                        <f:selectItems value="#{publicacion.subcategorias3}" />
                                    </h:selectOneMenu>
                                    <p/>

                                </h:panelGrid>
                            </p:outputPanel>
                            <br/>
                            <p:editor id="desc" value="#{publicacion.descripcion}" widgetVar="editor" 
                                      width="540" required="true" requiredMessage="Ingrese una descripcion" />
                            <p:message id="descVal" for="desc" />
                        </p:fieldset>

                        <p:fieldset legend="Imagenes" styleClass="fieldset" >

                            <p:fileUpload id="upload" widgetVar="uploader" label="Seleccionar" auto="true"
                                          fileUploadListener="#{publicacion.handleFileUpload}" update="growl"
                                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/" multiple="true" 
                                          cancelLabel="Cancelar" uploadLabel="Subir" mode="advanced" />
                        </p:fieldset>                  

                        <!-- <h2>Elije un periodo minimo y maximo de alquiler</h2> -->
                        <p:fieldset legend="Periodo minimo y maximo de alquiler" styleClass="fieldset" >
                            <h:panelGrid columns="4">

                                <h:outputLabel value="Minimo: " /> 
                                <p:inputText id="MinimoId" value="#{publicacion.periodoMinimo}" required="true"
                                             requiredMessage="Valor requerido"
                                             style="text-align: right; margin-left: 3px; width: 50px"/>
                                <h:selectOneMenu id="minimo" value="#{publicacion.selectedPeriodoMinimo}" >
                                    <f:selectItem itemLabel="Seleccione un periodo" itemValue="" />
                                    <f:selectItems value="#{publicacion.periodoMinimos}" />
                                </h:selectOneMenu>
                                <p:message id="MinimoVal" for="MinimoId"/>

                                <h:outputLabel value="Maximo: " /> 
                                <p:inputText id="MaximoId" value="#{publicacion.periodoMaximo}" 
                                             style="text-align: right; margin-left: 3px; width: 50px"/>
                                <h:selectOneMenu id="maximo" value="#{publicacion.selectedPeriodoMaximo}" >
                                    <f:selectItem itemLabel="Seleccione un periodo" itemValue="" />
                                    <f:selectItems value="#{publicacion.periodoMaximos}" />
                                </h:selectOneMenu>
                                <p/>

                            </h:panelGrid>
                        </p:fieldset>

                        <p:fieldset id="panelPrecios" legend="Precios" styleClass="fieldset" >

                            <h:outputLabel value="Hora" for="hora" />
                            <p:inputText id="hora" value="#{publicacion.precioHora}" style="text-align: right; margin-left: 3px; width: 50px"/>
                            <p:spacer width="25" />

                            <h:outputLabel value="Dia" for="dia" />
                            <p:inputText id="dia" value="#{publicacion.precioDia}" required="true" 
                                         requiredMessage="Precio diario requerido"
                                         style="text-align: right; margin-left: 3px; width: 50px"/>
                            <p:spacer width="25" />

                            <h:outputLabel value="Semana" for="semana" />
                            <p:inputText id="semana" value="#{publicacion.precioSemana}"
                                         title="Si no ingresas un valor se calculara como Precio Diario * 7"
                                         style="text-align: right; margin-left: 3px; width: 50px"/>
                            <p:tooltip for="semana" showEvent="focus" hideEvent="blur" />
                            <p:spacer width="25" />

                            <h:outputLabel value="Mes" for="mes" />
                            <p:inputText id="mes" value="#{publicacion.precioMes}" 
                                         style="text-align: right; margin-left: 3px; width: 50px"
                                         title="Si no ingresas un valor se calculara como Precio Diario * 30" />
                            <p:tooltip for="mes" showEvent="focus" hideEvent="blur" />

                        </p:fieldset>

                        <p:fieldset id="panelDireccion" legend="Direccion" styleClass="fieldset" rendered="#{publicacion.pedirDireccion}" >

                            <p>
                                Aun no has registrado ninguna direccion. Por favor hazlo ahora para poder publicar un producto.
                            </p>

                            <h:panelGrid columns="3" cellpadding="2" columnClasses="labelColumn,fieldColumn" 
                                         width="100%" style="text-align: center" >

                                <h:outputLabel value="Pais" />
                                <h:selectOneMenu id="pais" value="#{publicacion.paisSeleccionado}" required="true"
                                                 requiredMessage="Valor requerido" >
                                    <f:selectItem itemLabel="Seleccione un pais" itemValue="" />
                                    <f:selectItems value="#{publicacion.paises}" />
                                    <p:ajax event="change" update="provincia growl" process="@this"
                                            listener="#{publicacion.actualizarProvincias}" />
                                </h:selectOneMenu>
                                <p:message for="pais" />

                                <h:outputLabel value="Provincia" />
                                <h:selectOneMenu id="provincia" value="#{publicacion.provinciaSeleccionada}" 
                                                 required="true" requiredMessage="Valor requerido" >
                                    <f:selectItem itemLabel="Seleccione una provincia" itemValue="" />
                                    <f:selectItems value="#{publicacion.provincias}" />
                                    <p:ajax event="change" process="@this" />
                                </h:selectOneMenu>
                                <p:message for="provincia" />

                                <h:outputLabel value="Ciudad" />
                                <p:inputText id="ciudad" value="#{publicacion.ciudad}" required="true"
                                             requiredMessage="Valor requerido" styleClass="datosInput" />
                                <p:message for="ciudad" />

                                <h:outputLabel value="Barrio" />
                                <p:inputText id="barrio" value="#{publicacion.barrio}" required="true"
                                             requiredMessage="Valor requerido" styleClass="datosInput" />
                                <p:message for="barrio" />

                                <h:outputLabel value="Calle" />
                                <p:inputText id="calle" value="#{publicacion.calle}" required="true"
                                             requiredMessage="Valor requerido" styleClass="datosInput" />
                                <p:message for="calle" />

                                <h:outputLabel value="Numero" />
                                <p:inputText id="numero" value="#{publicacion.numero}" required="true"
                                             requiredMessage="Valor requerido" styleClass="datosInput" />
                                <p:message for="numero" />

                                <h:outputLabel value="Piso" />
                                <p:inputText id="piso" value="#{publicacion.piso}"
                                             styleClass="datosInput" />
                                <p:message for="piso" />

                                <h:outputLabel value="Depto" />
                                <p:inputText id="depto" value="#{publicacion.depto}" 
                                             styleClass="datosInput" />
                                <p:message for="depto" />
                            </h:panelGrid>
                        </p:fieldset>

                        <f:facet name="footer">
                            <p:commandButton value="Crear" action="#{publicacion.crearPublicacion}" ajax="false" style="width: 80px"/>
                            <p:spacer width="20" />
                            <p:commandButton  type="reset" value="Limpiar" action="misPublicaciones" />
                        </f:facet>

                    </h:panelGrid>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
